import { useMemo } from 'react';
import './index.less';

interface IProps {
  isLast?: boolean;
  status?: number; // 0 | 1 | 2
  content: JSX.Element | string;
  onFinish?: () => void;
}

const statusClassList = ['wait', 'doing', 'done'];

const Stage = (props: IProps) => {
  const { isLast = false, status = 0, content, onFinish } = props;

  const containerClass = useMemo(() => {
    const classList = ['stage__container'];
    if (isLast) {
      classList.push('stage__container--last');
    }
    classList.push(`stage__container--${statusClassList[status]}`);
    return classList.join(' ');
  }, [isLast, status]);

  return (
    <div className={containerClass}>
      <div className="stage__indicator" onClick={onFinish}></div>
      <div className="stage__content">{content}</div>
    </div>
  );
};

export default Stage;
